<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
      <script src="http://www.polymer-project.org/webcomponents.js"></script>
  <link rel="import"
        href="http://www.polymer-project.org/0.5/components/polymer/polymer.html">

</head>
<body>

<h1>Recursive Template</h1>
<polymer-element name='tree-element'>
<template>
<ul>
<template repeat="{{items}}" id="t">
  <li>{{name}}
    <ul>
      <template ref="t" repeat="{{children}}"></template>
    </ul>
  </li>
</template>
</ul>
  </template>
<script>
Polymer('tree-element', {
  ready: function() {
  this.items = [
      {
        'name': 'Africa',
        'children': [
          {
            'name': 'Egypt'
          },
          {
            'name': 'Kenya',
            'children': [
              {
                'name': 'Nairobi'
              },
              {
                'name': 'Mombasa'
              }
            ]
          },
          {
            'name': 'Sudan',
            'children': {
              'name': 'Khartoum'
            }
          }
        ]
      },
      {
        'name': 'Asia',
        'children': [
          {
            'name': 'China'
          },
          {
            'name': 'India'
          },
          {
            'name': 'Russia'
          },
          {
            'name': 'Mongolia'
          }
        ]
      },
      {
        'name': 'Australia',
        'children': {
          'name': 'Commonwealth of Australia'
        }
      },
      {
        'name': 'Europe',
        'children': [
          {
            'name': 'Germany'
          },
          {
            'name': 'France'
          },
          {
            'name': 'Spain'
          },
          {
            'name': 'Italy'
          }
        ]
      },
      {
        'name': 'North America',
        'children': [
          {
            'name': 'Mexico',
            'children': [
              {
                'name': 'Mexico City'
              },
              {
                'name': 'Guadalajara'
              }
            ]
          },
          {
            'name': 'Canada',
            'children': [
              {
                'name': 'Ottawa'
              },
              {
                'name': 'Toronto'
              }
            ]
          },
          {
            'name': 'United States of America'
          }
        ]
      },
      {
        'name': 'South America',
        'children': [
          {
            'name': 'Brazil'
          },
          {
            'name': 'Argentina'
          }
        ]
      }
    ];
}
  });
</script>
  </polymer-element>
  <tree-element></tree-element>
</body>
</html>
